<template>
	<div class="container">
		<div class="map" id="map" @click="showChinaMap" ref="mapChartRef"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import china from '../../assets/mapData/map.JSON';
	import { fontSize } from '@/common/fontSize.js';
	echarts.registerMap('china', china);
	var provinces = [
		'shanghai',
		'hebei',
		'shanxi',
		'neimenggu',
		'liaoning',
		'jilin',
		'heilongjiang',
		'jiangsu',
		'zhejiang',
		'anhui',
		'fujian',
		'jiangxi',
		'shandong',
		'henan',
		'hubei',
		'hunan',
		'guangdong',
		'guangxi',
		'hainan',
		'sichuan',
		'guizhou',
		'yunnan',
		'xizang',
		'shanxi1',
		'gansu',
		'qinghai',
		'ningxia',
		'xinjiang',
		'beijing',
		'tianjin',
		'chongqing',
		'xianggang',
		'aomen',
		'taiwan',
	];
	var provincesText = [
		'上海',
		'河北',
		'山西',
		'内蒙古',
		'辽宁',
		'吉林',
		'黑龙江',
		'江苏',
		'浙江',
		'安徽',
		'福建',
		'江西',
		'山东',
		'河南',
		'湖北',
		'湖南',
		'广东',
		'广西',
		'海南',
		'四川',
		'贵州',
		'云南',
		'西藏',
		'陕西',
		'甘肃',
		'青海',
		'宁夏',
		'新疆',
		'北京',
		'天津',
		'重庆',
		'香港',
		'澳门',
		'台湾',
	];
	export default {
		created() {},
		mounted() {
			this.$nextTick(() => {
				this.initMap();
			});
			window.addEventListener('resize', () => {
				// 判断是否存在，直接调用resize方法
				if (this.map) this.map.resize();
			});
		},
		data() {
			return {
				map: {},
			};
		},
		props: {},
		methods: {
			getMapOpt(place) {
				var planePath =
					'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
				const option = {
					series: [
						//飞线数据
						{
							type: 'lines',
							coordinateSystem: 'geo',
							zlevel: 2,
							effect: {
								show: true,
								period: 10,
								trailLength: 0,
								constantSpeed: fontSize(0.3),
								symbol: planePath,
								symbolSize: fontSize(0.2),
								delay: 6,
							},

							lineStyle: {
								normal: {
									color: '#FFFFFF',
									width: fontSize(0.02),
									opacity: 0.6,
									curveness: 0.2,
								},
							},
							data: [
								{
									fromName: '内蒙古',
									toName: '上海',
									coords: [
										[110.5977, 41.3408],
										[121.4648, 31.2891],
									],
								},
								{
									fromName: '内蒙古',
									toName: '北京',
									coords: [
										[110.5977, 41.3408],
										[116.4, 40.4],
									],
								},
								{
									fromName: '内蒙古',
									toName: '湖北',
									coords: [
										[110.5977, 41.3408],
										[112.29, 30.98],
									],
								},
								{
									fromName: '内蒙古',
									toName: '香港',
									coords: [
										[110.5977, 41.3408],
										[114.17, 22.32],
									],
								},
								{
									fromName: '内蒙古',
									toName: '青海',
									coords: [
										[110.5977, 41.3408],
										[97.07, 35.62],
									],
								},
								{
									fromName: '内蒙古',
									toName: '四川',
									coords: [
										[110.5977, 41.3408],
										[103.36, 30.65],
									],
								},
								{
									fromName: '内蒙古',
									toName: '江西',
									coords: [
										[110.5977, 41.3408],
										[115.89, 27.97],
									],
								},
								{
									fromName: '内蒙古',
									toName: '云南',
									coords: [
										[110.5977, 41.3408],
										[101.71, 24.84],
									],
								},
								{
									fromName: '内蒙古',
									toName: '吉林',
									coords: [
										[110.5977, 41.3408],
										[126.32, 43.38],
									],
								},
								{
									fromName: '内蒙古',
									toName: '新疆',
									coords: [
										[110.5977, 41.3408],
										[86.61, 40.79],
									],
								},
							],
						},
					],
					geo: {
						map: place || 'china',
						aspectScale: 0.84, //当前视角的缩放比例
						zoom: 1.23, //当前视角的缩放比例
						label: {
							show: true,
							color: '#C6F5FE',
							fontSize: fontSize(0.12),
						},

						itemStyle: {
							normal: {
								areaColor: {
									type: 'radial',
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
										},
									],
									globalCoord: false, // 缺省为 false
								},
								borderColor: 'rgba(152, 234, 255, 1)',
								borderWidth: fontSize(0.01),
								shadowColor: 'rgba(255, 255, 255, 1)',
								shadowOffsetX: fontSize(0.02), // 折线的X偏移
								shadowOffsetY: fontSize(0.02), // 折线的Y偏移
								shadowBlur: fontSize(0.5), // 折线模糊
							},
							emphasis: {
								areaColor: 'RGBA(7, 62, 86, 1)',
								label: {
									color: '#fff',
								},
							},
						},
					},
				};
				return option;
			},
			// 显示中国地图
			showChinaMap() {
				const option = this.getMapOpt();
				this.map.setOption(option, true);
			},

			initMap() {
				this.map = echarts.init(this.$refs['mapChartRef']);
				const option = this.getMapOpt();
				if (option && typeof option === 'object') {
					this.map.setOption(option, true);
				}
			},
		},
		computed: {},
	};
</script>

<style scoped>
	.container {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.map {
		height: 100%;
	}
</style>
